//定义全局变量存储数据
let obj = {};

// 1,动态生成页面
setPage();
// 2，点击事件
$('.container').click(function (e) {
    // - 按钮
    if (e.target.getAttribute('name') === '-') {
        let num = $('.num').val() - 0;

        $('.num').val(num === 1 ? 1 : num - 1);

        // + 按钮
    } else if (e.target.getAttribute('name') === '+') {
        let num = $('.num').val() - 0;
        $('.num').val(num === obj.goods_number - 0 ? obj.goods_number - 0 : num + 1);


    } else if (e.target.getAttribute('name') === 'inCart') {
        // 点击加入购物车

        const cookieObj = myGetCookie();
        console.log(cookieObj);

        // 判断有没有登录
        if (cookieObj.login === undefined) {

            if (window.confirm('您还没有登录，点击确定，跳转登陆页面')) {
                window.location.href = './login.html';
            }

        } else {
            // 判断有没有 创建购物车
            // console.log(localStorage.cart);
            // 还没有创建购物车
            if (localStorage.cart === undefined) {
                // 当前商品信息存储在 变量obj中
                // 添加两个属性 buy num 
                // buy  当前商品的购买状态 true 表示购买 false 表示不购买
                // num  当期商品的购买数量 最小是1 最大是库存值

                //添加buy属性 当前商品的购买状态 
                obj.buy = true;
                // 当前商品添加购买数量 
                let number = $('.num').val() - 0;
                if (number >= 1 && number <= obj.goods_number - 0) {
                    // 添加num属性，属性值是购买数量
                    obj.num = number;
                } else {
                    window.alert(`您输入的购买数量有误，请输入1至 ${obj.goods_number}之间的数值`);
                    return;
                }

                localStorage.cart = JSON.stringify([obj]);

                // 购物车已经创建
            } else {
                // 创建arr 获取localStorage中的数据 还原为数组形式
                const arr = JSON.parse(localStorage.cart);

                // 如果是空数组，直接写入数据
                if (arr.length === 0) {
                    obj.buy = true;
                    // 当前商品添加购买数量 
                    let number = $('.num').val() - 0;
                    if (number >= 1 && number <= obj.goods_number - 0) {
                        // 添加num属性，属性值是购买数量
                        obj.num = number;
                    } else {
                        window.alert(`您输入的购买数量有误，请输入1至 ${obj.goods_number}之间的数值`);
                        return;
                    }
                    localStorage.cart = JSON.stringify([obj]);

                    // 不是空数组
                } else {
                    // 判断商品 在不在车上
                    let bool = arr.some(function (item) {
                        return item.goods_id === obj.goods_id;
                    })

                    if (bool) {
                        for (let i = 0; i <= arr.length - 1; i++) {
                            if (arr[i].goods_id === obj.goods_id) {
                                // 获取input中 输入的数据
                                let number = $('.num').val() - 0;

                                if (arr[i].num + number >= 1 && arr[i].num + number <= arr[i].goods_number) {
                                    arr[i].num = arr[i].num + number;
                                } else {
                                    window.alert(`您购买的数量超出范围，最多还能购买${arr[i].goods_number - 0 - arr[i].num}件`);
                                    return;
                                }

                            }
                        }


                        // 增加商品数量
                        // 将新数组写入 localStorage中
                        localStorage.cart = JSON.stringify(arr);

                    } else {
                        // 如果商品不存在

                        // 当前商品的购买状态
                        obj.buy = true;
                        // 当前商品添加购买数量 
                        let number = $('.num').val() - 0;
                        if (number >= 1 && number <= obj.goods_number - 0) {
                            // 添加num属性，属性值是购买数量
                            obj.num = number;
                        } else {
                            window.alert(`您输入的购买数量有误，请输入1至 ${obj.goods_number}之间的数值`);
                            return;
                        }

                        arr.unshift(obj);

                        localStorage.cart = JSON.stringify(arr);
                    }

                }
            }


            console.log(obj);

            window.location.href = './cart.html';
        }

    }

})


async function setPage() {
    // 获取浏览器地址栏数据
    const valObj = myGetUrlValue();
    console.log(valObj);

    const res = await myPromiseAjax('../server/goods_detail.php', 'post', { goods_id: valObj.goods_id }, 'json');
    console.log(res);

    obj = res;
    let str = `
          <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">商品详细信息</h3>
          </div>
          <div class="panel-body">
            <div class="media">
              <div class="media-left">
                <a href="#">
                  <img class="media-object" src="${res.goods_big_logo}" alt="...">
                </a>
              </div>
              <div class="media-body">
                <h4 class="media-heading">${res.goods_name}</h4>
                <p>
                  <i class="glyphicon glyphicon-yen"></i>
                  <span>${res.goods_price}</span>
                </p>
                <div class="btn-group" role="group" aria-label="...">
                  <button type="button" class="btn btn-default">XL</button>
                  <button type="button" class="btn btn-default">L</button>
                  <button type="button" class="btn btn-default">M</button>
                  <button type="button" class="btn btn-default">S</button>
                  <button type="button" class="btn btn-default">XS</button>
                </div>
                <p style="position:relative">
                  <input value="1" class="num">
                  <button name="-" type="button" class="jian btn btn-default">-</button>
                  <button name="+" type="button" class="jia btn btn-default">+</button>
                </p>
                <p>
                  <a href="javascript:;" class="btn btn-warning btn-lg" role="button">立即购买</a>
                  <a name="inCart" href="JavaScript:;" class="btn btn-danger btn-lg" role="button">加入购物车</a>
                </p>
              </div>
            </div>
            <ul class="nav nav-tabs">
              <li role="presentation" class="active"><a href="#">商品详细信息</a></li>
              <li role="presentation"><a href="#">商品参数信息</a></li>
              <li role="presentation"><a href="#">相关商品</a></li>
            </ul>
            <div>
                ${res.goods_introduce}
            </div>
          </div>
        </div>

    `;

    $('.container').html(str);
}